<template>
    <el-container class="layoutWrap">
        <!--侧边栏-->
        <sidebar ref="sideBarRef"></sidebar>
        <el-container>
            <!--头部-->
            <el-header class="layoutHeader">
                <useHeader @isCollapse="isCollapseMet"></useHeader>
            </el-header>
            <!--tag区域-->
            <tag></tag>
            <!--内容区域-->
            <el-main>
                <div class="mainBg">
                    <router-view v-slot="{ Component }">
                        <keep-alive :include="keepAliveNameList">
                            <component :key="refreshRouterViewKey" :is="Component" />
                        </keep-alive>
                    </router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
<script type="text/javascript">
//侧边栏
import sidebar from "./sidebar/index.vue";
//头部导航栏
import useHeader from "./header/index.vue";
//导航栏区域
import tag from './tag.vue';
import routeConfig  from "@/router/routerConfig.js";
export default{
    data () {
        return {
            //index:0
            isUseKeepAlive:true,
            refreshRouterViewKey:null,
            keepAliveNameList: [],
            allName:[],
            routeConfigArr:[]
        }
    },
    created(){
        this.routeConfigArr = routeConfig;
    },
    mounted (){
        this.allNameMet();
        this.$mitt.on('needRefresh',this.routeChange);
    },
    watch:{
        
    },
    components : {
        sidebar,
        useHeader,
        tag
    },
    methods : {
        isCollapseMet(isCollapse){
            this.$refs.sideBarRef.collapseMet(isCollapse);
        },
        routeChange(params){
            if (this.$route.path !== params.path) return false;
            this.refreshRouterViewKey = params.path;
            this.keepAliveNameList = this.allName.filter((name) => params.name !== name);
            this.$nextTick(() => {
                this.refreshRouterViewKey = null;
                this.keepAliveNameList = this.allName;
            })
        },
        allNameMet(){
            var routerInfo = this.$util.treeToArray(this.routeConfigArr);
            routerInfo.forEach(item => {
                if(typeof item.name != 'undefined'){
                    this.allName.push(item.name);
                }
            })
            this.keepAliveNameList = this.allName;
        }
    }
}
</script>
<style lang="less">
	.layoutWrap {
        .pageCover();
        min-width: 1150px !important;
        .el-sub-menu__icon-arrow {
            position: absolute !important;
        }
        > span {
            display: inline-block;
            margin: 0 10px;
            font-size: 14px;
        }
        .layoutHeader{
            border-bottom: 1px solid #f1f2f3;
        }
        .el-main{
            background:#F2F3F5;
            padding-top: 0px;
        }
        .mainBg{
            background:white;
            padding:15px;
            border-radius:5px;
        }
    }
</style>
